<!-- 绑定事件  -->

<script setup>
import { ref } from 'vue';

let url =ref("http://www.360.com");

let href =ref("http://www.163.com");

let content =ref("360");

let style1 = ref("background-color: red;width: 100px;height: 100px;");
let style2 = ref({ // 样式属性 设置 对象的形式
    'background-color': 'red', // // 注意：如果属性值有 - 空格等符号，一定好用引号引起来
    width: '100px',
    height: '100px'
})
//   动态的地址  图片渲染后的实际路径：  http://localhost:5173/src/assets/logo.svg
let src = ref("/src/assets/logo.svg");

    let class1  =ref("redStyle  bigStyle");

    // 对象的方式：为true 添加进去，为false 不加进去
    let  class2  =ref({
        redStyle:false,
        yellowStyle:true,
        bigStyle:true,
        smallStyle:false
    });

    let s1 =ref("redStyle");
    let s2 =ref("yellowStyle");
    let s3 =ref("bigStyle");
    let s4 =ref("smallStyle");


</script>

<template>

<a href="http://www.baidu.com">百度一下</a><br/>


<a href="http://www.baidu.com">{{content }}</a><br/>

<!--  插值表达式，不能作用在属性上的  -->
  <a href="{{ url }}">{{ content }}</a><br/>

   <!--  动态属性值 需要 设置成 绑定  -->
   <a v-bind:href="url">{{ content }}</a><br/>
<!-- 绑定的简写 -->
<a :href="url">{{ content }}</a><br/>

<!-- 如果 属性名 和变量名 一致，可以如下简写 -->
<a :href>163</a><br/> <!-- 相当于 <a :href="href">163</a><br/> -->

 <!--  样式的2种写法 -->
 <div style="background-color: red;width: 100px;height: 100px;">style0</div>
<div :style="style1">style1</div>
<div :style="style2">style2</div>


<!-- 文件路径 -->

<!--  静态的写法： 直接使用 工程中的相对路径  -->
<img src="../assets/logo.svg"  height="100px" width="100px" alt="图片" title="tupian"/>
<!-- 动态的（绑定的方式），路径要基于项目运行的图片路径  http://localhost:5173/src/assets/vue.svg  -->
<img :src  height="100px" width="100px" alt="图片" title="tupian"/>


<!-- 同时设置多个 class值 -->

<div class="redStyle  bigStyle">测试1</div>
<div :class="class1">测试2</div> <!-- let class1  =ref("redStyle  bigStyle"); -->

<div :class="class2">测试3</div> <!-- 对象的方式 -->

<div :class="[s2, s4]">测试4</div><!-- 数组的方式 -->

</template>

<style>
    .redStyle{
        color: red;
        border: 1px solid red;

    }

    .yellowStyle{
        color: yellow;
        border: 1px solid yellow;

    }



    .bigStyle{
        font-size: 100px;
        font-weight: 700;
        

    }


    .smallStyle{
        font-size: 50px;
        font-weight: 100;
        

    }

</style>
